<template>
  <div class="my">
    <div class="my-isLogin"
         v-if="isLogin">

      <!-- 登录背景 -->
      <div class="my-background"
           v-if="isLogin"
           :style="{backgroundImage: `url(${userInfo.userBg})`}">

        <div class="uploadfile">
          <van-uploader preview-size="400"
                        :after-read="uploadBackground" />
        </div>
      </div>

    </div>

    <!-- 未登录背景 -->
    <div class="my-isLogin NotLogged"
         v-else>
      <img class="auto-img"
           src="../assets/ruixing.png"
           alt="">
    </div>

    <div class="login-content">

      <!-- 登录状态 -->
      <div class="content"
           v-if="isLogin"
           @click="goPersonalData">

        <!-- 登录状态头像 -->
        <div class="portrait">
          <div class="Loginavatar">
            <img class="auto-img"
                 :src="userInfo.userImg"
                 alt="">
          </div>

        </div>

        <div class="use">
          <div class="usname">{{userInfo.nickName}}</div>
          <div class="content-desc">{{userInfo.desc ? userInfo.desc:'这家伙很懒，什么也没有留下!!!'}}</div>
        </div>
      </div>

      <!-- 未登录状态 -->
      <div class="content"
           v-else>
        <div class="portrait">
          <img class="auto-img"
               src="../assets/i.png"
               alt="">
        </div>

        <div class="use">
          <div class="usname"
               @click="goLogin">登录/注册></div>
          <div class="content-desc">欢迎~Luckin新朋友</div>
        </div>
      </div>

      <!-- 跳转页 -->
      <div class="information">

        <div class="Personal list-item"
             v-for="(item,index) in userData"
             :key="index"
             @click="goName(item.routeName)">

          <div class="Personal">{{item.title}}</div>
          <van-icon name="arrow" />
        </div>

      </div>

    </div>

  </div>

</template>

<script>
export default {
  name: "My",

  data () {
    return {
      // 登录状态
      isLogin: true,


      userData: [
        {
          title: '个人资料',
          routeName: 'PersonalData'
        },
        {
          title: '我的订单',
          routeName: 'MyOrder'
        },
        {
          title: '我的收藏',
          routeName: 'MyLike'
        },
        {
          title: '我的地址',
          routeName: 'MyAddress'
        },
        {
          title: '安全中心',
          routeName: 'MyISetUp'
        }

      ],

      userInfo: {
        //简介
        desc: '',
        // 用户名字
        nickName: '',
        // 用户背景图片
        userBg: '',
        // 用户头像
        userImg: ''
      }
    }
  },

  created () {
    this.getMyData()
  },

  methods: {
    // 跳转页
    goName (name) {
      if (this.isLogin == false) {
        this.$toast.fail('请您先登录后再使用!')
        return
      }
      this.$router.push({ name })
    },

    // 前往个人资料
    goPersonalData () {
      this.$router.push({ name: 'PersonalData' })
    },

    // 前往登录注册页
    goLogin () {
      setTimeout(() => {
        this.$router.push({ name: 'Login' })

      }, 100)
    },

    // 获取个人信息
    getMyData () {
      this.axios({
        method: 'get',
        url: '/findMy'
      }).then(result => {

        if (result.data.code == 700) {
          this.isLogin = false
        }

        if (result.data.code == 'A001') {
          this.userInfo = result.data.result[0]
        }
      })
    },

    // 上传背景图
    uploadBackground (file) {

      let imgType = file.file.type.split(/\//)[1]

      let serverBase64Img = file.content.replace(/data:image\/[A-Za-z]+;base64,/, '');

      this.axios({
        method: 'post',
        url: '/updateUserBg',
        data: {
          imgType,
          serverBase64Img
        }
      }).then(result => {


        if (result.data.code == 'I001' && result.data.result[0] == 1) {
          this.userInfo.userBg = result.data.userBg
          this.$toast.success('背景上传成功')
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.my {
  .NotLogged {
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../assets/ruixing.png");
  }
  .my-isLogin {
    width: 100%;
    height: 200px;
    position: relative;
    .my-background {
      height: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #e8e8e8;
      position: relative;
      .uploadfile {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        .van-uploader {
          width: 100%;
          height: 100%;
        }
        .van-uploader__wrapper {
          width: 100%;
          height: 100%;
        }
        .van-uploader__upload {
          margin: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .login-content {
    position: relative;
    top: -40px;
    padding: 10px;
    width: 355px;
    margin-left: 10px;
    border-radius: 10px 10px 0 0;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 1) 35px
    );
    .content {
      display: flex;
      align-items: center;

      .portrait {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: relative;
        .auto-img {
          border-radius: 50%;
        }
        .Loginavatar {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
        .Loginavatar-box {
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
      .use {
        margin-left: 10px;
        .usname {
          margin-bottom: 20px;
          color: #0c34ba;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .information {
      margin-top: 30px;
      line-height: 50px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }
}
</style>